<template>
   <div class="mydiv">
       <template v-for="menu in menuData">
           <el-submenu :key="menu.menuId" :index="menu.path" v-if="menu.children!=null">
               <template slot="title">
                   <i :class="menu.icon"></i>
                   <span slot="title">{{menu.cnName}}</span>
               </template>
               <MenuTree :menuData="menu.children"></MenuTree>
           </el-submenu>
           <el-menu-item :key="menu.menuId" :index="menu.path" v-else @click="clickTag(menu)">
               <i :class="menu.icon"></i>
               <span slot="title">{{menu.cnName}}</span>
           </el-menu-item>
       </template>
   </div>
</template>
<script>
    export default {
        name: "MenuTree",
        props: {
            menuData: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        methods:{
            clickTag(val){
                this.$store.commit('setTagList',val)
            }
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .mydiv {
        background-color: rgb(84,92,101);
        color: white !important;
        height: 100%;
    }
    ::v-deep .el-menu-item {
        color:white;
    }
    ::v-deep .el-submenu__title {
        color:white;
    }
    ::v-deep .el-menu-item:hover{
        background-color: lavenderblush;
        color:black;
    }
    ::v-deep .el-submenu__title:hover {
        background-color: lavenderblush;
        color:black;
    }
</style>
